<template>
  <el-container>
    <!-- 头部的开始 -->
    <el-header style="background-color:#eff2f7" class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/foodList' }">数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>食品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- header右侧头像开始 -->
      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="poputs">
          <div @click="tzHome">首页</div>
          <div @click="tzLogin">退出</div>
        </div>
      </div>
      <!-- header右侧头像结束 -->
    </el-header>
    <!-- 头部的结束 -->
    <!-- main的开始 -->
    <el-main>
      <el-table :data="tableData2" style="width: 100%;border:1px solid #eef1f6">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="食品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="餐馆名称">
                <span>{{ props.row.restaurant_id }}</span>
              </el-form-item>
              <el-form-item label="食品 ID">
                <span>{{ props.row.item_id }}</span>
              </el-form-item>
              <el-form-item label="餐馆 ID">
                <span>{{ props.row.restaurant_id }}</span>
              </el-form-item>
              <el-form-item label="食品介绍">
                <span>{{ props.row.tips }}</span>
              </el-form-item>
              <el-form-item label="餐馆地址">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="食品评分">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="食品分类">
                <span>{{ props.row.catogory_id }}</span>
              </el-form-item>
              <el-form-item label="食品月销量">
                <span>{{ props.row.month_sales }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="食品名称" prop="name"></el-table-column>
        <el-table-column label="食品介绍" prop="tips"></el-table-column>
        <el-table-column label="评分" prop="rating"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 食品列表页的编辑按钮 -->
            <el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
            <!-- 食品列表页的删除按钮 -->
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器的开始 -->
      <div class="block">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="20"
          class="pagination"
        ></el-pagination>
      </div>
      <!-- 分页器的结束 -->
      <!-- 编辑食品弹出框的开始 -->
      <el-dialog title="修改食品信息" :visible.sync="outerVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="食品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="食品介绍">
            <el-input v-model="form.introduce"></el-input>
          </el-form-item>
          <el-form-item label="食品分类">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="饮料" value="1"></el-option>
              <el-option label="糕点" value="2"></el-option>
              <el-option label="乳制品" value="3"></el-option>
              <el-option label="肉制品" value="4"></el-option>
              <el-option label="粮油" value="5"></el-option>
              <el-option label="糖果蜜饯" value="6"></el-option>
              <el-option label="其他食品" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="食品图片">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
          <!-- ————————————添加规格表格的开始———————————— -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="规格" width="180"></el-table-column>
            <el-table-column prop="name" label="包装费" width="180"></el-table-column>
            <el-table-column prop="address" label="配送费"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete_guige(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- ————————————添加规格表格的结束———————————— -->
          <el-button type="primary" @click="innerVisible = true">添加规格</el-button>
        </el-form>
        <!-- 内层弹出框的开始 -->
        <el-dialog width="50%" title="添加规格" :visible.sync="innerVisible" append-to-body>
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="规格"
              prop="guige"
              :rules="[
                    { required: true, message: '规格不能为空'},
                  ]"
            >
              <el-input type="guige" v-model.number="numberValidateForm.guige" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="包装费">
              <el-input-number
                v-model="num1"
                @change="handleChangePack"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="配送费">
              <el-input-number
                v-model="num2"
                @change="handleChangeDelivery"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
              <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 内层弹出框的结束 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="outerVisible = false">确 定</el-button>
          <!-- <el-button type="primary" @click="submitEdit(scope.$index,scope.row)">确 定</el-button> -->
        </div>
      </el-dialog>
      <!-- 编辑食品弹出框的结束 -->
    </el-main>
    <!-- main的结束 -->
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 头像
      circleUrl:
        "https://img01.sogoucdn.com/app/a/100520093/fb41c7c77a2454f7-01eba5833e7e38bc-11cc0200d4b834a0dddb28091fd46806.jpg",
      //用于接受食品列表的数据
      tableData2: [],
      showDate: [],
      currentPage1: 1,
      // 弹框的属性
      outerVisible: false,
      innerVisible: false,
      //表单的属性
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        introduce: "",
      },
      //照片的属性
      dialogImageUrl: "",
      dialogVisible: false,
      //添加规格的数据
      tableData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
      ],
      // 添加规格表单——规格
      numberValidateForm: {
        guige: "",
      },
      //添加规格表单——包装费和价格的初始值
      num1: 1,
      num2: 1,
      //内层弹出框的状态
      showInner: true,
    };
  },
  mounted() {
    this.$axios
      .get(`https://elm.cangdu.org/shopping/v2/foods?offset=0&limit=20`)
      .then((res) => {
        this.tableData2 = res.data;
        this.showDate = res.data;
      });
  },
  methods: {
    // 编辑食品
    handleEdit(index, row) {
      this.outerVisible = true;
      this.form.name = row.name;
      this.form.introduce = row.tips;
    },
    // 提交编辑的修改
    submitEdit(index, row) {
      this.outerVisible = false;
      // console.log(this.form.name);
      row.name = this.form.name;
      row.tips = this.form.introduce;
      console.log(row.name);
    },
    // 分页器的方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$axios
        .get(
          `https://elm.cangdu.org/shopping/v2/foods?offset=${
            (val - 1) * 20
          }&limit=20`
        )
        .then((res) => {
          this.tableData2 = res.data;
        });
    },
    //定义插件中的方法：去除报错
    handleDelete() {},
    //表单的方法
    onSubmit() {
      console.log("submit!");
    },
    // 上传图片的方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //提交所填规格
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableData.push({
            date: this.numberValidateForm.guige,
            name: this.num1,
            address: this.num2,
          });
          this.numberValidateForm.guige = " ";
          this.innerVisible = false;
        } else {
          console.log("提交失败!");
          return false;
        }
      });
    },
    // 重置规格、包装费、配送费
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.num1 = 1;
      this.num2 = 1;
    },
    //改变包装费的方法
    handleChangePack(value) {
      console.log(value);
    },
    //改变价格的方法
    handleChangeDelivery(value) {
      console.log(value);
    },
    //删除整行规格
    handleDelete_guige(index, row) {
      this.tableData.splice(index, 1);
    },
    //点击头像
    tzHome() {
      this.$router.push({ path: "/home" });
    },
    tzLogin() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/* 头像的样式 */
.block {
  position: relative;
}
.poputs {
  position: absolute;
  top: 55px;
  left: -20px;
  width: 80px;
  height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 2px 3px 10px -1px #333;
  display: none;
  z-index: 999;
}
.block:hover .poputs {
  display: block;
}
.poputs > div {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.poputs > div:hover {
  background-color: #e4e8f1;
  color: #333;
}
/* 分页器样式调整 */
.pagination{
  margin: 20px;
}
</style>